<template>
  <div class="animes-container">
    <div class="page-header">
      <h1>动漫管理</h1>
      <button class="add-button" @click="showAddAnimeDialog = true">
        <i class="fa fa-plus"></i>
        添加动漫
      </button>
    </div>
    
    <!-- 搜索和筛选 -->
    <div class="search-filter">
      <div class="search-box">
        <i class="fa fa-search"></i>
        <input 
          v-model="searchQuery" 
          type="text" 
          placeholder="搜索动漫名称、简介"
          @input="handleSearch"
        />
      </div>
      <div class="filter-group">
        <select v-model="filterStatus" @change="handleFilter">
          <option value="">全部状态</option>
          <option value="ongoing">连载中</option>
          <option value="completed">已完结</option>
          <option value="planned">计划中</option>
        </select>
        <select v-model="filterType" @change="handleFilter">
          <option value="">全部类型</option>
          <option value="tv">TV动画</option>
          <option value="ova">OVA</option>
          <option value="movie">剧场版</option>
          <option value="special">特别篇</option>
        </select>
      </div>
    </div>
    
    <!-- 动漫列表 -->
    <div class="animes-table-container">
      <table class="animes-table">
        <thead>
          <tr>
            <th><input v-model="selectAll" type="checkbox" @change="toggleSelectAll" /></th>
            <th>ID</th>
            <th>封面</th>
            <th>动漫名称</th>
            <th>类型</th>
            <th>状态</th>
            <th>集数</th>
            <th>评分</th>
            <th>播放量</th>
            <th>更新时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="anime in paginatedAnimes" :key="anime.id">
            <td><input v-model="selectedAnimes" type="checkbox" :value="anime.id" /></td>
            <td>{{ anime.id }}</td>
            <td class="anime-cover">
              <img :src="anime.coverUrl || '/src/assets/logo.png'" alt="封面" />
            </td>
            <td class="anime-title">{{ anime.title }}</td>
            <td>
              <span class="type-badge" :class="anime.type">
                {{ getTypeText(anime.type) }}
              </span>
            </td>
            <td>
              <span class="status-badge" :class="anime.status">
                {{ getStatusText(anime.status) }}
              </span>
            </td>
            <td>{{ anime.episodeCount }}</td>
            <td class="rating">{{ anime.rating }}</td>
            <td>{{ anime.views.toLocaleString() }}</td>
            <td>{{ formatDate(anime.updatedAt) }}</td>
            <td class="action-buttons">
                <button class="view-button" @click="viewAnime(anime)">
                  <i class="fa fa-eye"></i>
                  查看
                </button>
                <button class="edit-button" @click="editAnime(anime)">
                  <i class="fa fa-edit"></i>
                  编辑
                </button>
                <button class="status-button" :class="anime.status" @click="changeStatus(anime)">
                  <i class="fa fa-power-off"></i>
                  状态
                </button>
                <button class="delete-button" @click="deleteAnime(anime)">
                  <i class="fa fa-trash"></i>
                  删除
                </button>
              </td>
          </tr>
        </tbody>
      </table>
      
      <!-- 空状态 -->
      <div v-if="filteredAnimes.length === 0" class="empty-state">
        <i class="fa fa-search"></i>
        <p>暂无动漫数据</p>
      </div>
    </div>
    
    <!-- 分页 -->
    <div v-if="filteredAnimes.length > 0" class="pagination">
      <button :disabled="currentPage === 1" @click="currentPage = 1">
        <i class="fa fa-angle-double-left"></i>
      </button>
      <button :disabled="currentPage === 1" @click="currentPage--">
        <i class="fa fa-angle-left"></i>
      </button>
      <span class="page-info">
        第 {{ currentPage }} 页，共 {{ totalPages }} 页
      </span>
      <button :disabled="currentPage === totalPages" @click="currentPage++">
        <i class="fa fa-angle-right"></i>
      </button>
      <button :disabled="currentPage === totalPages" @click="currentPage = totalPages">
        <i class="fa fa-angle-double-right"></i>
      </button>
    </div>
    
    <!-- 添加/编辑动漫对话框 -->
    <div v-if="showAddAnimeDialog || showEditAnimeDialog" class="dialog-overlay" @click="closeDialog">
      <div class="dialog" @click.stop>
        <div class="dialog-header">
          <h3>{{ showEditAnimeDialog ? '编辑动漫' : '添加动漫' }}</h3>
          <button class="close-button" @click="closeDialog">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="dialog-content">
          <form @submit.prevent="submitAnimeForm">
            <div class="form-group">
              <label>动漫名称</label>
              <input 
                v-model="animeForm.title" 
                type="text" 
                required
                placeholder="请输入动漫名称"
              />
            </div>
            <div class="form-group">
              <label>动漫简介</label>
              <textarea 
                v-model="animeForm.description" 
                rows="4"
                placeholder="请输入动漫简介"
              ></textarea>
            </div>
            <div class="form-group">
              <label>动漫类型</label>
              <select v-model="animeForm.type" required>
                <option value="tv">TV动画</option>
                <option value="ova">OVA</option>
                <option value="movie">剧场版</option>
                <option value="special">特别篇</option>
              </select>
            </div>
            <div class="form-group">
              <label>动漫状态</label>
              <select v-model="animeForm.status" required>
                <option value="ongoing">连载中</option>
                <option value="completed">已完结</option>
                <option value="planned">计划中</option>
              </select>
            </div>
            <div class="form-group">
              <label>集数</label>
              <input 
                v-model="animeForm.episodeCount" 
                type="number" 
                required
                min="1"
              />
            </div>
            <div class="form-group">
              <label>封面URL</label>
              <input 
                v-model="animeForm.coverUrl" 
                type="text" 
                placeholder="请输入封面图片URL"
              />
            </div>
            <div class="form-group">
              <label>标签（用逗号分隔）</label>
              <input 
                v-model="animeForm.tagsInput" 
                type="text" 
                placeholder="如：热血,冒险,奇幻"
              />
            </div>
            <div class="dialog-footer">
              <button type="button" class="cancel-button" @click="closeDialog">取消</button>
              <button type="submit" class="save-button">{{ showEditAnimeDialog ? '更新' : '添加' }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    
    <!-- 查看动漫详情对话框 -->
    <div v-if="selectedAnime" class="dialog-overlay" @click="selectedAnime = null">
      <div class="dialog dialog-large" @click.stop>
        <div class="dialog-header">
          <h3>动漫详情</h3>
          <button class="close-button" @click="selectedAnime = null">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="dialog-content">
          <div class="anime-detail">
            <div class="anime-header">
              <img :src="selectedAnime.coverUrl || '/src/assets/logo.png'" alt="封面" class="detail-cover" />
              <div class="anime-info">
                <h2>{{ selectedAnime.title }}</h2>
                <div class="anime-meta">
                  <span class="type-badge" :class="selectedAnime.type">
                    {{ getTypeText(selectedAnime.type) }}
                  </span>
                  <span class="status-badge" :class="selectedAnime.status">
                    {{ getStatusText(selectedAnime.status) }}
                  </span>
                  <span class="rating">评分：{{ selectedAnime.rating }}</span>
                </div>
                <div class="anime-stats">
                  <div class="stat-item">
                    <i class="fa fa-film"></i>
                    <span>集数：{{ selectedAnime.episodeCount }}</span>
                  </div>
                  <div class="stat-item">
                    <i class="fa fa-eye"></i>
                    <span>播放量：{{ selectedAnime.views.toLocaleString() }}</span>
                  </div>
                  <div class="stat-item">
                    <i class="fa fa-calendar-alt"></i>
                    <span>更新：{{ formatDate(selectedAnime.updatedAt) }}</span>
                  </div>
                </div>
                <div class="anime-tags">
                  <span 
                    v-for="tag in selectedAnime.tags" 
                    :key="tag" 
                    class="tag"
                  >
                    {{ tag }}
                  </span>
                </div>
              </div>
            </div>
            <div class="anime-desc">
              <h3>简介</h3>
              <p>{{ selectedAnime.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AnimesView',
  data() {
    return {
      // 模拟动漫数据
      animes: [
        {
          id: 'anime1',
          title: '鬼灭之刃 无限列车篇',
          description: '大正时期，日本。心地善良的卖炭少年·炭治郎，有一天他的家人被鬼杀死了，而唯一幸存下来的妹妹祢豆子也变成了鬼。为了寻求让妹妹变回人类的方法，炭治郎踏上了「鬼杀队」的道路。',
          type: 'movie',
          status: 'completed',
          episodeCount: 1,
          rating: 9.2,
          views: 12500000,
          coverUrl: '/src/assets/鬼灭之刃.jpeg',
          tags: ['热血', '奇幻', '冒险'],
          updatedAt: '2024-01-01T10:00:00Z',
        },
        {
          id: 'anime2',
          title: '进击的巨人 最终季',
          description: '故事发生在一个被巨大围墙环绕的城市，人类生活在其中，墙外栖息着身形巨大的巨人。主角艾伦·耶格尔发誓要将巨人全部驱逐出人类的领地。',
          type: 'tv',
          status: 'completed',
          episodeCount: 87,
          rating: 9.5,
          views: 25600000,
          coverUrl: '/src/assets/logo.png',
          tags: ['热血', '悬疑', '奇幻'],
          updatedAt: '2024-01-02T14:30:00Z',
        },
        {
          id: 'anime3',
          title: '黑神话：悟空',
          description: '改编自中国古典名著《西游记》，讲述了一只与众不同的猴子的故事。',
          type: 'ova',
          status: 'planned',
          episodeCount: 6,
          rating: 0,
          views: 0,
          coverUrl: '/src/assets/黑神话.jpeg',
          tags: ['动作', '奇幻', '中国风'],
          updatedAt: '2024-01-03T09:15:00Z',
        },
        {
          id: 'anime4',
          title: '海贼王',
          description: '拥有财富、名声、权力，这世界上的一切的男人「海贼王」哥尔·D·罗杰，在被行刑受死之前说了一句话，让全世界的人都涌向了大海。',
          type: 'tv',
          status: 'ongoing',
          episodeCount: 1080,
          rating: 9.0,
          views: 100000000,
          coverUrl: '/src/assets/悟空.jpg',
          tags: ['热血', '冒险', '搞笑'],
          updatedAt: '2024-01-04T16:45:00Z',
        },
      ],
      searchQuery: '',
      filterStatus: '',
      filterType: '',
      selectedAnimes: [],
      selectAll: false,
      showAddAnimeDialog: false,
      showEditAnimeDialog: false,
      selectedAnime: null,
      currentPage: 1,
      itemsPerPage: 10,
      animeForm: {
        id: '',
        title: '',
        description: '',
        type: 'tv',
        status: 'ongoing',
        episodeCount: 1,
        coverUrl: '',
        tags: [],
        tagsInput: '',
      },
    }
  },
  computed: {
    filteredAnimes() {
      let filtered = this.animes
      
      // 搜索
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        filtered = filtered.filter(anime => 
          anime.title.toLowerCase().includes(query) || 
          anime.description.toLowerCase().includes(query) ||
          anime.tags.some(tag => tag.toLowerCase().includes(query)),
        )
      }
      
      // 状态筛选
      if (this.filterStatus) {
        filtered = filtered.filter(anime => anime.status === this.filterStatus)
      }
      
      // 类型筛选
      if (this.filterType) {
        filtered = filtered.filter(anime => anime.type === this.filterType)
      }
      
      return filtered
    },
    paginatedAnimes() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.filteredAnimes.slice(start, end)
    },
    totalPages() {
      return Math.ceil(this.filteredAnimes.length / this.itemsPerPage)
    },
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
    },
    handleFilter() {
      this.currentPage = 1
    },
    toggleSelectAll() {
      if (this.selectAll) {
        this.selectedAnimes = this.filteredAnimes.map(anime => anime.id)
      } else {
        this.selectedAnimes = []
      }
    },
    formatDate(dateString) {
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN')
    },
    getTypeText(type) {
      switch (type) {
        case 'tv': return 'TV动画'
        case 'ova': return 'OVA'
        case 'movie': return '剧场版'
        case 'special': return '特别篇'
        default: return '未知'
      }
    },
    getStatusText(status) {
      switch (status) {
        case 'ongoing': return '连载中'
        case 'completed': return '已完结'
        case 'planned': return '计划中'
        default: return '未知'
      }
    },
    viewAnime(anime) {
      this.selectedAnime = { ...anime }
    },
    editAnime(anime) {
      this.animeForm = { 
        ...anime, 
        tagsInput: anime.tags.join(', '), 
      }
      this.showEditAnimeDialog = true
    },
    changeStatus(anime) {
      const statusOptions = ['ongoing', 'completed', 'planned']
      const currentIndex = statusOptions.indexOf(anime.status)
      const nextIndex = (currentIndex + 1) % statusOptions.length
      anime.status = statusOptions[nextIndex]
    },
    deleteAnime(anime) {
      if (confirm(`确定要删除动漫「${anime.title}」吗？此操作不可撤销！`)) {
        const index = this.animes.findIndex(a => a.id === anime.id)
        if (index > -1) {
          this.animes.splice(index, 1)
        }
      }
    },
    closeDialog() {
      this.showAddAnimeDialog = false
      this.showEditAnimeDialog = false
      this.resetForm()
    },
    resetForm() {
      this.animeForm = {
        id: '',
        title: '',
        description: '',
        type: 'tv',
        status: 'ongoing',
        episodeCount: 1,
        coverUrl: '',
        tags: [],
        tagsInput: '',
      }
    },
    submitAnimeForm() {
      // 处理标签输入
      const tags = this.animeForm.tagsInput
        ? this.animeForm.tagsInput.split(',').map(tag => tag.trim()).filter(tag => tag)
        : []
      
      if (this.showEditAnimeDialog) {
        // 编辑动漫
        const index = this.animes.findIndex(a => a.id === this.animeForm.id)
        if (index > -1) {
          this.animes[index] = { 
            ...this.animes[index], 
            ...this.animeForm, 
            tags, 
          }
        }
      } else {
        // 添加动漫
        const newAnime = {
          ...this.animeForm,
          id: 'anime' + (this.animes.length + 1),
          rating: 0,
          views: 0,
          tags,
          updatedAt: new Date().toISOString(),
        }
        this.animes.push(newAnime)
      }
      
      this.closeDialog()
    },
  },
}
</script>

<style scoped>
.animes-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  overflow-x: auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.page-header h1 {
  color: #2c3e50;
  margin: 0;
  font-size: 24px;
}

.add-button {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  transition: background-color 0.3s;
}

.add-button:hover {
  background: #2980b9;
}

.add-button i {
  margin-right: 5px;
}

/* 搜索和筛选 */
.search-filter {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 20px;
  flex-wrap: wrap;
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 300px;
}

.search-box i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #95a5a6;
}

.search-box input {
  width: 100%;
  padding: 10px 15px 10px 40px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.filter-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-group select {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  min-width: 150px;
}

/* 动漫列表 */
.animes-table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  margin-bottom: 20px;
  overflow-x: scroll;
  min-width: 800px;
}

.animes-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1000px;
}

.animes-table th,
.animes-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}

.animes-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
}

.anime-cover img {
  width: 50px;
  height: 70px;
  object-fit: cover;
  border-radius: 4px;
}

.anime-title {
  font-weight: 500;
  max-width: 200px;
  white-space: normal;
  word-break: break-word;
}

.rating {
  font-weight: 600;
  color: #e67e22;
}

.type-badge,
.status-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.type-badge.tv {
  background: #3498db;
  color: white;
}

.type-badge.ova {
  background: #9b59b6;
  color: white;
}

.type-badge.movie {
  background: #e74c3c;
  color: white;
}

.type-badge.special {
  background: #2ecc71;
  color: white;
}

.status-badge.ongoing {
  background: #2ecc71;
  color: white;
}

.status-badge.completed {
  background: #95a5a6;
  color: white;
}

.status-badge.planned {
  background: #f39c12;
  color: white;
}

.action-buttons {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.action-buttons button {
  padding: 3px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.3s;
}

.view-button {
  background: #95a5a6;
  color: white;
}

.view-button:hover {
  background: #7f8c8d;
}

.edit-button {
  background: #3498db;
  color: white;
}

.edit-button:hover {
  background: #2980b9;
}

.status-button.ongoing {
  background: #95a5a6;
  color: white;
}

.status-button.completed {
  background: #3498db;
  color: white;
}

.status-button.planned {
  background: #2ecc71;
  color: white;
}

.delete-button {
  background: #e74c3c;
  color: white;
}

.delete-button:hover {
  background: #c0392b;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #95a5a6;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 15px;
  opacity: 0.5;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.pagination button {
  padding: 8px 12px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.pagination button:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #3498db;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 14px;
  color: #666;
}

/* 对话框 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.dialog-large {
  max-width: 800px;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.dialog-header h3 {
  margin: 0;
  color: #2c3e50;
}

.close-button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #95a5a6;
}

.dialog-content {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #34495e;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 30px;
}

.cancel-button,
.save-button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s;
}

.cancel-button {
  background: #ecf0f1;
  color: #7f8c8d;
}

.cancel-button:hover {
  background: #bdc3c7;
}

.save-button {
  background: #3498db;
  color: white;
}

.save-button:hover {
  background: #2980b9;
}

/* 动漫详情样式 */
.anime-detail {
  padding: 20px;
}

.anime-header {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.detail-cover {
  width: 180px;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
}

.anime-info {
  flex: 1;
  min-width: 300px;
}

.anime-info h2 {
  color: #2c3e50;
  margin-top: 0;
  margin-bottom: 15px;
}

.anime-meta {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.anime-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #7f8c8d;
}

.anime-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.tag {
  padding: 5px 10px;
  background: #ecf0f1;
  border-radius: 15px;
  font-size: 12px;
  color: #7f8c8d;
}

.anime-desc h3 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.anime-desc p {
  color: #34495e;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .animes-container {
    padding: 10px;
  }
  
  .search-filter {
    flex-direction: column;
  }
  
  .filter-group {
    width: 100%;
  }
  
  .filter-group select {
    flex: 1;
  }
  
  .animes-table-container {
    overflow-x: auto;
  }
  
  .animes-table {
    display: block;
    overflow-x: auto;
  }
  
  .animes-table th,
  .animes-table td {
    padding: 8px;
    font-size: 13px;
  }
  
  .anime-title {
    max-width: 150px;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .pagination {
    flex-wrap: wrap;
  }
  
  .anime-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .detail-cover {
    width: 150px;
    height: 200px;
  }
  
  .anime-info {
    min-width: auto;
  }
  
  .anime-stats {
    justify-content: center;
  }
  
  .anime-tags {
    justify-content: center;
  }
}
</style>